新增一個 UI 模板 (templates/)，將昨天的 index.html 以及今天的 results.html 檔案移入資料夾。預計今天完工後的專案架構圖：(先將 main.py 檔名改成 app.py，看了比較習慣ＸＤ)

AI_Nutri_Project/
├── app.py                # Flask 應用程式主程式
├── credentials.json      # Google OAuth 憑證
└── templates/
    ├── index.html        # 輸入/首頁 UI
    └── results.html      # 分析結果 UI

results.html 的分層設計 (Layered Layout)

1. 將摘要置頂 (Top Summary - 總結)

• AI 總結：用一句話總結分析結果。例：「您的午餐營養均衡，但熱量略高於您的減重目標。」
• 核心指標：顯示當餐攝入的總熱量 (Calories) 和營養素比例 (蛋白質/脂肪/碳水化合物) 的圖表。

2. 結果選擇區 (Action/Output Selector)

• 使用分頁 (Tabs) 或卡片按鈕 (Pill-shaped Buttons) 讓使用者選擇回覆類型。
• 必選項目 (點選切換)：
  • 食物營養及熱量分析 (The Deep Dive)
  • 今日飲食建議 (Meal Plan Suggestion)
  • 生活方式調整建議 (Lifestyle Advice)

3. 核心內容區 (Gemini's Response)

• 食物營養及熱量分析：

  • 列表：列出圖片中的食物，並顯示估計份量和估計熱量。
  • 數據比對：將當餐數據與 Google Fit 的每日消耗熱量 (或設定的目標) 進行比對。

• 飲食建議/生活方式調整：

  • 項目符號 (Bullet Points)：使用簡潔的點列清單，清楚地給出可操作的建議 (Actionable Steps)。
  • 語氣：使用鼓勵、支持和非評判性的語氣。

編輯 results.html

1. 標題&結論

2. 加入食物營養及熱量分析功能

 <div class="tabs">
        <button class="tab-btn active" onclick="showTab('analysis')">
          食物營養及熱量分析
        </button>      
      </div>
      <div id="analysis" class="tab-content active">
        <h2>這裡會顯示分析的食材</h2>      
      </div>

頁面預覽

3. 增加項目說明

  <table class="data-table">
          <thead>
            <tr>
              <th>項目</th>
              <th>詳細說明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1.</td>
              <td></td>
            </tr>
            <tr>
              <td>2.</td>
              <td></td>
            </tr>
          </tbody>
        </table>

頁面預覽

4. 增加飲食建議tab

  <button class="tab-btn" onclick="showTab('advice')">飲食建議</button>
  <div id="advice" class="tab-content">
        <h2>這裡會顯示飲食建議的結論</h2>
        <ul>
          <li>1.</li>
          <li>2.</li>         
        </ul>
      </div>

頁面預覽

跟昨天的 index 一樣，可以再增加自己想要的功能